	
	/* 边框颜色 */
	$border-color-dark: #DCDFE6;
	$border-color-base: #E4E7ED;
	$border-color-light: #EBEEF5;
	
	// 按钮颜色
	$btn-color-blue:#4399fc; 
	$btn-color-red:rgb(221, 82, 77); 
	$btn-color-taohong:#fa436a;
	// 字体颜色
	$text-color-light-black:#909399; 
	$font-color-dark: #303133;
	// 所有页面初始样式
	
	.clearfloat:after{
		display:block;
		clear:both;
		content:"";
		visibility:hidden;
		height:0
	}
	.clearfloat{zoom:1}
	.bg{
		position:absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		height: 250upx; 
	}
	.default-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		background:#2394fb;
		color: #fff;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
	
	/* input 样式 */
	.input-placeholder {
		color: #999999;
	}
	
	.placeholder {
		color: #999999;
	}
	.list{
		display: flex;
		 align-items: center;
		padding: 20upx 30upx;;
		background: #fff;
		// position: relative;
	}
	.wrapper{
			display: flex;
			flex-direction: column;
			flex: 1; 
		}
	
	page {
		.cate-section {
			position: relative;
			z-index: 5;
			border-radius: 16upx 16upx 0 0;
			margin-top: -20upx;
		}
	}
	/* 底部操作菜单 */
	.page-bottom{
		position:fixed;
		left: 30upx;
		bottom:30upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690upx;
		height: 100upx;
		background: rgba(255,255,255,.9);
		box-shadow: 0 0 20upx 0 rgba(0,0,0,.5);
		border-radius: 16upx;
		
		.p-b-btn{
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;
			.yticon{
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}
			&.active, &.active .yticon{
				color: $btn-color-taohong;
			}
			.icon-fenxiang2{
				font-size: 42upx;
				transform: translateY(-2upx);
			}
			.icon-shoucang{
				font-size: 46upx;
			}
		}
		.action-btn-group{
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30,#fa436a,#F56C6C);
			margin-left: 20upx;
			position:relative;
			&:after{
				content: '';
				position:absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				/* border-right: 1px solid rgba(255,255,255,.5); */
			}
			.action-btn{
				display:flex;
				align-items: center;
				justify-content: center;
				width: 440upx;
				height: 100%;
				font-size: $font-base ;
				padding: 0;
				border-radius: 0;
				background-color: $btn-color-blue;
				background: trans;
			}
		}
	}
	/**************************************************
	banner
	*/
   .slider-item {
		width: 100%;
		height: 100%;
		-webkit-flex-shrink: 0;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		background: #f6f6f6;
   }

	.swiper {
		height: 380upx;
	}
	.swiper-item {
		width: 100%;
		height: 100%;
	}
	.swiper-item image {
		width: 100%;
		height: 100%;
	}
   
	.banner-bg {
		position: relative;
		padding: 20% 50%;
	}
	 
	.banner-bg>img {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
	.m-t {
		margin-top: 16upx;
	}
	/***************************************************/
	
	/* 搜索框 */
	.mp-search-box{
		position:absolute;
		left: 6upx;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 80upx;
		.ser-input{
			flex:1;
			height: 56upx;
			 width: 470upx;
			line-height: 56upx;
			/* text-align: center; */
			padding-left: 140upx;
			display: inline-block;
			font-size: 28upx;
			color:$font-color-base;
			border-radius: 20px;
			background: rgba(255,255,255,.6);
			margin-left: 40upx;
			vertical-align: top;
		}
		
	} 
	
	.clear-icon {
		position: absolute;
		left: 410upx;
		top: 4upx;
		margin-left: 130upx;
		z-index: 10000;
	}
	.search-view {
		width: 100%;
		text-align: center;
		.uni-input {
			background-color: #F3F3F3;
			border-radius: 70upx;
			width: 90%;
			margin-left: 40upx;
			height: 70upx;
		}
		.ser-clear-icon {
			position: absolute;
			right: 50upx;
			top: 8upx;
			margin-left: 130upx;
			z-index: 10000;
		}
		.search-icon {
			position: absolute;
			left: 0;
			top: 8upx;
			margin-left: 130upx;
			z-index: 10000;
		}
	}
	/***********************************************
	用户图片显示
	*/
   .user-info-box{
   	height: 180upx;
   	display:flex;
   	align-items:center;
   	position:relative;
   	z-index: 1;
   	.portrait{
   		width: 130upx;
   		height: 130upx;
   		border:5upx solid #fff;
   		border-radius: 50%;
   		margin-left: 50upx;
   	}
   	.text{
   		display: block;
   		font-size: 25upx;
   		color: $font-color-dark;
   		margin-left: 20upx;
   	}
   }
   /*******************************************************/
	/*
	列表空白显示
	*/
   .empty {
		width: 100%;
		text-align: center;
		margin-top: 20upx;
		font-size: $font-base-size;
   }
		
	/*tab栏**********************************************/
	.navbar{
		display: flex;
		height: 80upx;
		padding: 0 10upx;
		background: #fff;
		box-shadow: 0 2upx 10upx rgba(0,0,0,.06);
		position: relative;
		z-index: 10;
		margin-top: 10upx;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: $font-color-dark;
			position: relative;
			&.current{
				color: $base-color;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 88upx;
					height: 0;
					border-bottom: 4upx solid $base-color;
				}
			}
		}
	}
	//tab栏的加载
	.swiper-box{
		height: calc(100% - 40px);
	}
	.list-scroll-content{
		height: 100%;
	} 
	.uni-swiper-item{
		height: auto;
	} 
	
	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center
	}
	
	.uni-load-more__text {
		font-size: 28upx;
		color: #999
	}
	
	.uni-load-more__img {
		height: 48upx;
		width: 48upx;
		margin-right: 20upx
	}
	
	.uni-load-more__img>view {
		position: absolute
	}
	
	.uni-load-more__img>view view {
		width: 12upx;
		height: 4upx;
		border-top-left-radius: 2upx;
		border-bottom-left-radius: 2upx;
		background: #999;
		position: absolute;
		opacity: .2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite
	}
	
	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 4upx;
		left: 18upx
	}
	
	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 22upx;
		right: 0
	}
	
	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 4upx;
		left: 18upx
	}
	
	.uni-load-more__img>view view:nth-child(4) {
		top: 22upx;
		left: 0
	}
	
	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px
	}
	
	.load2 {
		transform: rotate(30deg)
	}
	
	.load3 {
		transform: rotate(60deg)
	}
	
	.load1 view:nth-child(1) {
		animation-delay: 0s
	}
	
	.load2 view:nth-child(1) {
		animation-delay: .13s
	}
	
	.load3 view:nth-child(1) {
		animation-delay: .26s
	}
	
	.load1 view:nth-child(2) {
		animation-delay: .39s
	}
	
	.load2 view:nth-child(2) {
		animation-delay: .52s
	}
	
	.load3 view:nth-child(2) {
		animation-delay: .65s
	}
	
	.load1 view:nth-child(3) {
		animation-delay: .78s
	}
	
	.load2 view:nth-child(3) {
		animation-delay: .91s
	}
	
	.load3 view:nth-child(3) {
		animation-delay: 1.04s
	}
	
	.load1 view:nth-child(4) {
		animation-delay: 1.17s
	}
	
	.load2 view:nth-child(4) {
		animation-delay: 1.3s
	}
	
	.load3 view:nth-child(4) {
		animation-delay: 1.43s
	}
	
	@-webkit-keyframes load {
		0% {
			opacity: 1
		}
	
		100% {
			opacity: .2
		}
	}

	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 30upx 22upx;
		background: #fff;

		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 28upx + 2upx;
			color: #303133;
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度，原来是88upx,fanqz 改为110 */
		image {
			width: 110upx;
			height: 110upx;
			margin-bottom: 14upx;
			border-radius: 50%;
			opacity: .7;
			box-shadow: 4upx 4upx 20upx rgba(3, 0, 250, 0.3);
		}
	}
	
	.address-box{
		display: flex;
		align-items: center;
		.tag{
			font-size: 24upx;
			color: $base-color;
			margin-right: 10upx;
			background: #fffafb;
			border: 1px solid #ffb4c7;
			border-radius: 4upx;
			padding: 4upx 10upx;
			line-height: 1;
		}
		.address{
			font-size: 30upx;
			color: $font-color-dark;
		}
		.addressText {
			font-size: 24upx;
			margin-left: 10px;
			color: $font-color-dark;
		}
	
	}
	.u-box{
		font-size: $font-base-tit;
		color: $font-color-base;
		margin-top: 20upx;
		.title{
			margin-right: 30upx;
			display: inline-block;
			font-size: $font-base-tit;
			// padding-top: -20upx;
			// margin-bottom: 20upx;
		}
		.content {
			// display: block;
			font-size: $font-base-size;
		}
		.img {
			width:60upx;
			height:60upx; 
			display: inline-block;
			vertical-align: middle;
			margin-right:12upx;
			margin-top: -20upx;
			margin-bottom: 20upx;
		}
	}

	.f-header {
		display: flex;
		align-items: center;
		height: 140upx;
		padding: 6upx 30upx 8upx;
		background: #fff;

		image {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			margin-right: 20upx;
		}

		.tit-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			.tit {
				color: $font-color-light;
			}
		}

		.tit {
			font-family: PingFangSC-Semibold; 
			letter-spacing: 0;
			font-size: 50upx;
			line-height: 1.3;
			font-weight: bold;
		}

		//.tit2 {
		//	font-size: 24upx;
		//	color: #909399;
		//}

		.icon-you {
			font-size: 32upx +2upx;
			color: #000000;
		}

	}
	// 滑动菜单样式
	.swipe-action-list{
		padding: 30upx 30upx;
		display: flex;
		align-items: item;
		border-bottom: 1upx #eee solid;
		.item-box {
			flex: 1;
			width: 70%;
			display: flex;
			flex-direction: column;
			justify-content: center
		}
		.item-title {
			font-size: $font-base-size;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		
		}
		.item-img {
			height: 80upx;
			width: 80upx;
			margin-right: 20upx;
			display: block
		}
	}